/**
 * 封装 axios 统一 处理需要传递 请求头的情况
 */
import axios from "axios";
// import { useSelector } from "react-redux";
import store from "../store";

/**
 * 创建一个 axios 的实例
 *    为了给这个实例做请求与响应的拦截
 *
 * 问题：我不可以直接对 axios 做拦截操作？为啥要多搞一个 axios 实例出来呢？
 * 答案：如果你对 axios 直接做操作，影响的是整个axios。但项目中并不是所以接口请求都要做额外配置。
 *      比如说，登录接口就不需要在请求头中传递token。
 */
const http = axios.create({
  // 写这个有什么好处？ 换环境改1个地方就可以
  baseURL: process.env.REACT_APP_API_BASE_URL, // 这里最好处理下环境变量
});

// 请求拦截
http.interceptors.request.use(
  (config) => {
    // console.log("config", config);

    // 问题：这里能使用这个 useSelector ?
    // 回答：不可以，use开头的函数，都叫做 hook。要遵循 hook 的规则。
    // const token = useSelector((state) => state.user.token);

    // 那该如何拿：1. 本地存储  2. 引入 store 通过 store.getState()
    const {
      user: { token },
    } = store.getState();

    config.headers["Authorization"] = token;
    return config;
  },
  (error) => {
    return Promise.reject(error);
  }
);

// 响应拦截
http.interceptors.response.use(
  (response) => {
    console.log("response", response);
    return response;
  },
  (error) => {
    console.log("error", error);
    const {
      response: { status },
    } = error;
    // 判断 状态码 status 是否为 401。如果是，清空本地存储数据，打回登录页面。

    if (status === 401) {
      window.localStorage.removeItem("persist:root");
      window.location.reload();
    }

    return Promise.reject(error);
  }
);

export default http;
